<template>
  <div class="table-show-box">
    <el-col v-for="item in dataModel" :key="item.title">
      <el-col>
        <p class="table-show-title">{{ item.title }}</p>
        <el-col v-if="item.content" :span="24">
          <el-col
            v-for="e in item.content"
            :key="e.name"
            :span="8 || e.span"
            class="text"
          >
            <el-col v-if="e.type == 'text' || !e.type">
              <span class="label">{{ e.label }}:</span>
              <span class="value">{{
                e.value | formateCodeToNameByKey(e.name)
              }}</span>
            </el-col>
            <el-col v-if="e.type == 'img'">
              <div style="width: 140px">
                <div style="float: left">
                  <img
                    style="width: 40px; height: 40px"
                    src="https://rmt.dogedoge.com/rmt/Sdje_r1bEm2h2NH5QqAqyMrpZnFCNmfD_x3squtUoTsiL3NsST9rEMjafk?w=212&h=130"
                  />
                </div>
                <div style="float: right">
                  <p style="margin: 0">文件名</p>
                  <span>查看</span>
                  <span>下载</span>
                </div>
              </div>
            </el-col>
          </el-col>
        </el-col>
        <span />
        <slot />
      </el-col>
      <el-col v-if="item.tableColumns">
        <h-table-list
          border
          :show-pagination="item.showPage"
          type="local"
          :data="item.tableData"
          :form-options="item.formOptions"
          :pagination-info="item.paginationInfo"
          :page-sizes="[10, 20]"
          :columns="item.tableColumns"
        >
          <!-- 这里污染了很多字段,附件有n个字段不一致-->

          <template slot="operate-drawPath" slot-scope="scope">
            <viewer
              :images="
                scope.row.partPicList ||
                (scope.row.picture ? [scope.row.picture] : [])
              "
              @inited="inited"
              class="viewer"
              ref="viewer"
            >
              <template scope="scope">
                <img
                  style="width: 50px; height: 50px"
                  v-for="src in scope.images"
                  :src="src.viewPath ? src.viewPath : src"
                  :key="src"
                />
              </template>
            </viewer>
            <!-- <el-button type="text" @click="show">查看</el-button> -->
            <!-- <a :href="scope.row.drawPath">下载</a> -->
          </template>
          <template slot="operate-filePath" slot-scope="scope">
            <el-button
              type="text"
              v-if="scope.row.filePath"
              @click="download(scope.row.filePath)"
              >下载</el-button
            >
            <div v-else>-</div>
          </template>
        </h-table-list>
      </el-col>
    </el-col>
  </div>
</template>
<script>
import "viewerjs/dist/viewer.css";
import Viewer from "v-viewer/src/component.vue";
import { downloadFile } from "@/utils/download.js";

export default {
  props: ["dataModel"],
  components: {
    Viewer,
  },
  data() {
    return {
      showImg: false,
    };
  },

  methods: {
    download(url) {
      downloadFile(url);
    },
    inited(viewer) {
      this.$viewer = viewer;
    },
    show() {
      this.$viewer.show();
    },
  },
};
</script>
<style lang="scss">
.table-show-box {
  background: white;
  margin-bottom: 20px;
  padding-bottom: 20px;
  overflow: hidden;
}
.table-show-title {
  padding: 0 0 10px 0;
  border-bottom: 1px solid #e9e9e9;
}
.text {
  margin: 20px 0;
  color: #999;
}
</style>
